<template>
  <!-- 我的-未登录 -->
  <div class="user_index">
    <div class="header">
      <!-- 会员卡 -->
      <div class="card">
        <div class="user_info">
          <img class="per_img" src="../../../assets/img/modules/user/default_user.png" alt="">
          <div class="info">
            <h3>欢迎加入国开在线</h3>
            <p>登录后获得更多会员服务</p>
          </div>
        </div>
        <div class="btn">
          <a @click="openMember">登录</a> &nbsp; | &nbsp; <a>注册</a>
        </div>
      </div>
    </div>
    <!-- 入口列表 -->
    <div v-if="$store.state.device === 'APP'" class="enter_list">
       <a class="btn" href="javascript:;" @click="openUrl(1)">
           <img class="icon" src="../../../assets/img/modules/user/ico_ques.png" alt="">
            <div class="text">常见问题</div>
            <div class="right">
                <i class="tri"></i>
            </div>
       </a>
       <a class="btn" href="javascript:;" @click="openUrl(3)" >
           <img class="icon" src="../../../assets/img/modules/user/ico_set.png" alt="">
            <div class="text">设置</div>
            <div class="right">
                <i class="tri"></i>
            </div>
       </a>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    openUrl (index) {
      switch (index) {
        case 1:
          // eslint-disable-next-line no-undef
          Phone.consulting()
          break
        case 3:
          // eslint-disable-next-line no-undef
          Phone.goSetting()
          break
      }
    },
    openMember () {
      if (this.$store.state.device === 'APP') {
        // eslint-disable-next-line no-undef
        Phone.Discount()
      } else {
        this.$router.push({ path: '/user-phone' })
      }
    }
  },
  mounted () {
    // 微信 ?device=WX&gsign=gkzx&uniacid=25
    // 手机 ?device=APP&phone=
    if (this.$route.query.device) {
      this.$store.state.device = this.$route.query.device
    }
    if (this.$route.query.phone) {
      this.$store.state.user.phone = this.$route.query.phone
    }
  }
}
</script>
<style lang="scss" scoped>
  .user_index {
    background: #f6f6f6;
    width: 100%;

    .header {
      position: relative;
      overflow: hidden;
      padding-bottom: 20px;
      background: #fff;

      .card {
        width: 694px;
        height: 360px;
        background: url(../../../assets/img/modules/user/card_gray.png) no-repeat;
        background-size: 694px 360px;
        position: relative;
        z-index: 10;
        margin: 50px auto 0;
        border-radius: 15px;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);

        .user_info {
          padding: 50px;

          .per_img {
            width: 110px;
            height: 110px;
            float: left;
            border-radius: 100%;
            margin-right: 20px;
          }

          .info {
            overflow: hidden;
            padding-top: 15px;

            h3 {
              margin: 0 0 15px;
              font-size: 30px;
              color: #fff;
              font-weight: normal;
            }

            p {
              margin: 0;
              font-size: 26px;
              color: #E2E2E2;
            }
          }
        }

        .btn {
          position: absolute;
          left: 50px;
          top: 250px;
          font-size: 36px;
          color: #fff;
          line-height: 50px;
        }
      }
    }

    .header:before {
      content: '';
      width: 2000px;
      height: 2000px;
      display: inline-block;
      background: #292b36;
      border-radius: 100%;
      position: absolute;
      left: 50%;
      bottom: 200px;
      z-index: 1;
      margin-left: -1000px;
    }

    .equities {
      background: #fff;
      padding: 30px 0;
      margin-bottom: 20px;

      .title {
        margin-bottom: 30px;
        margin-left: 30px;
        font-size: 0;

        img {
          height: 28px;
        }
      }

      ul {
        overflow: hidden;

        li,a {
          display: block;
          float: left;
          width: 33.33%;
          text-align: center;
          font-size: 0;
          margin-bottom: 20px;
          position: relative;

          .icon {
            width: 100px;
            height: 100px;
            margin-bottom: 20px;
          }

          p {
            font-size: 26px;
            color: #666;
            margin: 0;
          }

          .label {
            height: 24px;
            position: absolute;
            left: 50%;
            top: 0;
          }
        }
      }
    }

    .enter_list {
      background: #fff;

      .btn {
        display: block;
        height: 100px;
        position: relative;

        .icon {
          width: 40px;
          height: 40px;
          margin: 30px 25px;
          float: left;
        }

        .text {
          overflow: hidden;
          border-bottom: 1px solid #e5e5e5;
          font-size: 28px;
          color: #666;
          height: 100px;
          line-height: 98px;
        }

        .right {
          position: absolute;
          top: 50%;
          right: 30px;
          height: 40px;
          margin-top: -20px;
          font-size: 0;

          .tri {
            float: right;
            width: 20px;
            height: 20px;
            border-top: 1px solid #999;
            border-right: 1px solid #999;
            margin-top: 10px;
            margin-left: 15px;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
          }

          span {
            font-size: 24px;
            color: #FBA146;
            line-height: 40px;
          }
        }
      }
    }
  }
</style>
